<template>
	<div class="wrap">
		<van-cell-group inset>
			<van-cell>
				<template #title>
					<div class="add-button">
						<van-icon name="add" class="add-icon" />
						<span class="text">新增考勤组</span>
					</div>
				</template>
			</van-cell>
			<div
				v-for="item in list"
				:key="item"
				class="group"
				@click="onClick(item)"
			>
				<div class="left">
					<van-icon name="arrow-left" class="icon" />
					<span class="text">{{ item.groupName }}</span>
				</div>
				<div class="right">
					<span>{{ item.count }}人</span>
					<van-icon name="arrow" />
				</div>
			</div>
			<!-- <van-cell
				><template #title>
					<div class="show-all">查看全部</div>
				</template>
			</van-cell> -->
		</van-cell-group>
	</div>
	<van-popup
		v-model:show="showBottom"
		position="bottom"
		round
		:style="{ backgroundColor: 'transparent' }"
	>
		<div class="button-group">
			<div class="text">{{ activeItem.name }}是排班值考勤组，请谨慎操作</div>
			<van-divider class="divider" />
			<a class="button" @click="gotoScheduling">排班</a>
			<!-- <van-divider class="divider" />
			<a class="button">修改考勤组</a> -->
		</div>
		<div class="cancel-group">
			<a class="cancel" @click="showBottom = false">取消</a>
		</div>
	</van-popup>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const loading = ref(false)
const finished = ref(false)
const list = ref<any[]>([])
const activeItem = ref<any>()

const getData = async () => {
	loading.value = true
	const response = await fetch('/mobile/heo/KqGroup.jsp')
	const json = await response.json()
	list.value = json.data
	loading.value = false
}

const showBottom = ref(false)
const onClick = (item: any) => {
	console.log(item)
	activeItem.value = item
	showBottom.value = true
}

const gotoScheduling = () => {
	console.log(activeItem.value)
	uni.navigateTo({
		url: '/pages/Scheduling/Scheduling?id=' +activeItem.value.id
	
	})
	
}

onMounted(() => {
	getData()
})
</script>

<style  scoped>
.wrap {
  padding: 10px 0px;
  flex: 1;
  overflow: auto;
}
.wrap .add-button {
  height: 40px;
  line-height: 40px;
  position: relative;
  display: flex;
  align-items: center;
}
.wrap .add-button .add-icon {
  color: #1989fa;
  font-size: 32px;
}
.wrap .add-button .text {
  display: inline-block;
  font-size: 20px;
  margin-left: 15px;
}
.wrap .group {
  display: flex;
  color: #696969;
  padding: 10px 0px;
  border-bottom: 1px solid #efefef;
}
.wrap .group .left {
  font-size: 16px;
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-left: 15px;
}
.wrap .group .left .icon {
  transform: rotate(-45deg);
  font-size: 24px;
  margin-left: 5px;
}
.wrap .group .left .text {
  margin-left: 5px;
}
.wrap .group .right {
  font-size: 16px;
  text-align: right;
  width: 65px;
  flex: 0 0 65px;
  margin-right: 5px;
}
.wrap .show-all {
  color: #696969;
  text-align: center;
}
.button-group {
  background-color: #fff;
  border-radius: 10px;
  margin: 0px 10px;
}
.button-group .text {
  color: #696969;
  text-align: center;
  padding: 10px 0px;
  font-size: 14px;
}
.button-group .button {
  display: block;
  text-align: center;
  color: #1989fa;
  padding: 10px 0px;
  font-size: 20px;
}
.button-group .divider {
  margin: 0px;
}
.cancel-group {
  margin: 10px 10px;
  border-radius: 10px;
  background-color: #fff;
}
.cancel-group .cancel {
  display: block;
  color: #1989fa;
  text-align: center;
  padding: 10px 0px;
  font-weight: 800;
  font-size: 20px;
}

</style>
